<template>
  <div class="send-social" ref="scrollContainer">
    <!-- 个人朋友圈头部 -->
    <div class="friend-header" v-if="currentFriend">
      <div class="friend-info">
        <el-avatar :size="60" :src="currentFriend.avatar_url" />
        <div class="friend-detail">
          <h3>{{ currentFriend.nick_name }}</h3>
          <p class="friend-wxid">微信号：{{ currentFriend.wx_id }}</p>
        </div>
      </div>
      <el-button type="primary" @click="backToHome">
        <el-icon><Back /></el-icon>返回首页
      </el-button>
    </div>

    <!-- 朋友圈内容区域 -->
    <div class="moments-section">
      <div class="moments-list" v-if="momentsList.length > 0">
        <div v-for="(moment, index) in momentsList" :key="index" class="moment-item">
          <div class="moment-header">
            <div class="avatar" @click="viewFriendMoments(moment)">
              <img :src="moment.avatar_url" alt="avatar" />
            </div>
            <div class="info">
              <div class="name" @click="viewFriendMoments(moment)">{{ moment.nick_name }}</div>
              <div class="time">{{ formatTime(moment.time) }}</div>
            </div>
          </div>
          <div class="moment-content">
            <!-- 纯文本 -->
            <div class="text" v-if="moment.content.text">{{ moment.content.text }}</div>
            <!-- 图片 -->
            <div class="media" v-if="moment.content.type == '1' && moment.content.url_list && moment.content.url_list.length > 0">
              <div class="image-grid" :class="getImageGridClass(moment.content.url_list.length)">
                <div v-for="(media, mediaIndex) in moment.content.url_list" :key="mediaIndex" class="image-item">
                  <el-image
                    :src="imgUrlPrefix + media"
                    :preview-src-list="moment.content.url_list.map((url) => imgUrlPrefix + url)"
                    :initial-index="mediaIndex"
                    :preview-teleported="true"
                    :preview="{
                      infinite: true,
                      hideOnClickModal: true,
                      zoomRate: 1.2,
                      minScale: 0.5,
                      maxScale: 3
                    }"
                  />
                </div>
              </div>
            </div>
            <!-- 视频 -->
            <div class="media" v-if="moment.content.type == '2' && moment.content.video_list && moment.content.video_list.length > 0">
              <div class="video-content">
                <video :src="imgUrlPrefix + moment.content.video_list[0]" controls preload="metadata" class="video-player"></video>
              </div>
            </div>
            <!-- 超链接 -->
            <div class="media" v-if="moment.content.type == '3' && moment.content.a_list && moment.content.a_list.length > 0">
              <div class="link-list">
                <div v-for="(alink, aIndex) in moment.content.a_list" :key="aIndex" class="link-box" @click="openLink(alink)">
                  <img src="/src/assets/alist.png" alt="link" class="link-img" />
                  <div class="link-content">
                    <div class="link-title">
                      {{ moment.content.title || alink }}
                    </div>
                    <div class="link-desc">{{ moment.content.desc }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 音乐 -->
            <div class="media" v-if="moment.content.type == '4' && moment.content.title">
              <div class="link-list">
                <div class="link-box" style="cursor: default">
                  <img src="/src/assets/alist.png" alt="music" class="link-img" />
                  <div class="link-content">
                    <div class="link-title">{{ moment.content.title }}</div>
                    <div class="link-desc">{{ moment.content.desc || '音乐' }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 位置 -->
            <div class="location" v-if="moment.location?.show_name">
              <el-icon><Location /></el-icon>
              <span>{{ moment.location.show_name }}</span>
            </div>
          </div>
          <div class="moment-footer">
            <div class="actions">
              <el-button type="text" @click="handleLike(moment)" :class="{ 'is-liked': moment.is_like }">
                <el-icon>
                  <component :is="moment.is_like ? 'StarFilled' : 'Star'" />
                </el-icon>
                {{ moment.is_like ? '取消点赞' : '点赞' }}
              </el-button>
              <el-button type="text" @click="handleComment(moment)">
                <el-icon><ChatDotRound /></el-icon>
                评论
              </el-button>
            </div>
            <div class="interactions" v-if="moment.like_user_list.length > 0 || moment.comment_user_list.length > 0">
              <div class="likes" v-if="moment.like_user_list.length > 0">
                <el-icon><Star /></el-icon>
                <span>{{ moment.like_user_list.map((user) => user.nick_name).join('、') }}</span>
              </div>
              <div class="comments" v-if="moment.comment_user_list.length > 0">
                <div v-for="(comment, commentIndex) in moment.comment_user_list" :key="commentIndex" class="comment-item">
                  <span class="comment-user">{{ comment.nick_name }}:</span>
                  <span class="comment-content">{{ comment.content }}</span>
                  <el-button v-if="comment.wx_id === msgprofile.wx_id" type="text" class="delete-comment" @click="handleDeleteComment(moment, comment)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 评论输入框 -->
            <div class="comment-input" v-if="moment.showCommentInput">
              <el-input v-model="moment.commentContent" type="textarea" :rows="2" placeholder="说点什么..." @keyup.enter="submitComment(moment)" />
              <div class="comment-actions">
                <el-button type="primary" size="small" @click="submitComment(moment)">发送</el-button>
                <el-button size="small" @click="cancelComment(moment)">取消</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="load-more" v-if="hasMore">
          <el-button type="text" @click="loadMore" :loading="loadingMore"> 加载更多 </el-button>
        </div>
      </div>
      <div v-else class="empty-state">
        <div class="skeleton-container">
          <!-- 第一条朋友圈 -->
          <div class="skeleton-moment">
            <div class="skeleton-header">
              <div class="skeleton-avatar"></div>
              <div class="skeleton-info">
                <div class="skeleton-name"></div>
                <div class="skeleton-time"></div>
              </div>
            </div>
            <div class="skeleton-content">
              <div class="skeleton-text"></div>
              <div class="skeleton-text"></div>
              <div class="skeleton-media-grid">
                <div class="skeleton-media-item"></div>
                <div class="skeleton-media-item"></div>
                <div class="skeleton-media-item"></div>
              </div>
            </div>
            <div class="skeleton-footer">
              <div class="skeleton-actions">
                <div class="skeleton-button"></div>
                <div class="skeleton-button"></div>
              </div>
              <div class="skeleton-interactions">
                <div class="skeleton-likes"></div>
                <div class="skeleton-comments">
                  <div class="skeleton-comment"></div>
                  <div class="skeleton-comment"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 第二条朋友圈 -->
          <div class="skeleton-moment">
            <div class="skeleton-header">
              <div class="skeleton-avatar"></div>
              <div class="skeleton-info">
                <div class="skeleton-name"></div>
                <div class="skeleton-time"></div>
              </div>
            </div>
            <div class="skeleton-content">
              <div class="skeleton-text"></div>
              <div class="skeleton-media-single"></div>
            </div>
            <div class="skeleton-footer">
              <div class="skeleton-actions">
                <div class="skeleton-button"></div>
                <div class="skeleton-button"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <div class="floating-buttons" v-show="showBackTop">
      <el-tooltip v-if="currentFriend" content="返回首页" placement="top">
        <el-button type="success" circle class="back-home" @click="backToHome">
          <el-icon><Back /></el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip content="回到顶部" placement="top">
        <el-button type="primary" circle class="back-to-top" @click="scrollToTop">
          <el-icon><Top /></el-icon>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, getCurrentInstance, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Location, Star, StarFilled, ChatDotRound, Delete, Back, Top } from '@element-plus/icons-vue';
import {
  getMomentsHome,
  getMomentsNextPage,
  toggleMomentsLike,
  addMomentsComment,
  deleteMomentsComment,
  getFriendMomentsHome,
  getFriendMomentsNextPage
} from '@/api/friendSocial/findSocial';

// 获取环境变量
const { proxy } = getCurrentInstance() || {};
const imgUrlPrefix = import.meta.env.VITE_GLOB_APP_IMG_URL || '';

// 全局window声明（仅为TS消除报错）
declare const window: any;

// 定义类型
interface Moment {
  type: string;
  id: string;
  wx_id: string;
  nick_name: string;
  avatar: string;
  avatar_url: string;
  time: number;
  content: {
    text: string;
    title: string;
    desc: string;
    content_url: string;
    thumb_list: string[];
    media_list: string[];
    url_list: string[];
    video_list: string[];
    a_list: Array<{
      title: string;
      url: string;
      desc?: string;
    }>;
    type?: string;
  };
  like_count: number;
  like_user_count: number;
  like_user_list: Array<{
    wx_id: string;
    nick_name: string;
    time: number;
  }>;
  comment_count: number;
  comment_user_count: number;
  comment_user_list: Array<{
    comment_id: number;
    wx_id: string;
    nick_name: string;
    content: string;
    time: number;
  }>;
  location?: {
    country: string;
    city: string;
    address: string;
    address_name: string;
    show_name: string;
    lng: string;
    lat: string;
  };
  xml_content: string;
  is_like?: boolean;
  showCommentInput?: boolean;
  commentContent?: string;
}

// 获取本地存储的用户信息
const msgprofile = JSON.parse(localStorage.getItem('msgprofile') || '{}');

// 朋友圈列表数据
const momentsList = ref<Moment[]>([]);
const loading = ref(false);
const loadingMore = ref(false);
const hasMore = ref(true);
const lastId = ref('');

// 当前查看的好友信息
const currentFriend = ref<{
  wx_id: string;
  nick_name: string;
  avatar_url: string;
} | null>(null);

// 添加滚动容器的引用
const scrollContainer = ref<HTMLElement | null>(null);

// 添加显示控制变量
const showBackTop = ref(false);

// 添加滚动到顶部的函数
const scrollToTop = () => {
  const container = scrollContainer.value;
  if (container) {
    container.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
};

// 修改滚动监听函数
const handleScroll = () => {
  const container = scrollContainer.value;
  if (!container) return;

  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const clientHeight = container.clientHeight;

  // 当滚动超过400px时显示按钮
  showBackTop.value = scrollTop > 400;

  // 当滚动到距离底部 50px 时触发加载更多
  if (scrollHeight - scrollTop - clientHeight < 50 && !loadingMore.value && hasMore.value) {
    loadMore();
  }
};

// 数据类型识别和补全
function patchMomentContentType(list: any[]) {
  list.forEach((moment) => {
    const c = moment.content;
    // 超链接优先
    if (c.a_list && Array.isArray(c.a_list) && c.a_list.length > 0) {
    } else if (c.video_list && Array.isArray(c.video_list) && c.video_list.length > 0) {
      c.type = '2';
    } else if (c.url_list && Array.isArray(c.url_list) && c.url_list.length > 0) {
      c.type = '1';
    } else {
      c.type = '0';
    }
    // a_list兼容
    if (!c.a_list) c.a_list = [];
  });
}

// 搜索方法
const handleSearch = async () => {
  try {
    const wxId = msgprofile.wx_id || '';
    const res = await getMomentsHome(wxId);
    momentsList.value = res.data.data.list;
    patchMomentContentType(momentsList.value);
    lastId.value = res.data.lastId;
    hasMore.value = res.data.data.list.length == 10;
  } catch (error) {
    ElMessage.error('获取朋友圈数据失败');
  } finally {
  }
};

// 查看好友朋友圈
const viewFriendMoments = async (moment: Moment) => {
  if (moment.wx_id === msgprofile.wx_id) return;
  if (currentFriend.value?.wx_id === moment.wx_id) return;
  currentFriend.value = {
    wx_id: moment.wx_id,
    nick_name: moment.nick_name,
    avatar_url: moment.avatar_url
  };
  loading.value = true;
  momentsList.value = [];
  try {
    const res = await getFriendMomentsHome(moment.wx_id, msgprofile.wx_id);
    momentsList.value = res.data.data.list;
    patchMomentContentType(momentsList.value);
    lastId.value = res.data.lastId;
    hasMore.value = res.data.data.list.length == 10;
    nextTick(() => {
      const container = scrollContainer.value;
      if (container) {
        container.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    });
  } catch (error) {
    ElMessage.error('获取好友朋友圈失败');
  } finally {
    loading.value = false;
  }
};

// 返回首页
const backToHome = async () => {
  currentFriend.value = null;
  loading.value = true;
  momentsList.value = []; // 清空列表以显示骨架屏
  await handleSearch();
};

// 修改加载更多函数
const loadMore = async () => {
  if (loadingMore.value || !hasMore.value) return;
  loadingMore.value = true;
  try {
    const wxId = msgprofile.wx_id || '';
    const lastMomentId = momentsList.value[momentsList.value.length - 1]?.id;
    if (!lastMomentId) {
      // ElMessage.error('获取最后一条朋友圈ID失败');
      return;
    }
    const res = currentFriend.value
      ? await getFriendMomentsNextPage(currentFriend.value.wx_id, lastMomentId, msgprofile.wx_id)
      : await getMomentsNextPage(wxId, lastMomentId);
    const newList = res.data.data.list;
    patchMomentContentType(newList);
    momentsList.value = [...momentsList.value, ...newList];
    lastId.value = res.data.lastId;
    hasMore.value = res.data.data.list.length == 10;
  } catch (error) {
    ElMessage.error('加载更多数据失败');
  } finally {
    loadingMore.value = false;
  }
};

// 点赞处理
const handleLike = async (moment: Moment) => {
  try {
    await toggleMomentsLike(moment.id, moment.is_like ? '0' : '1', msgprofile.wx_id);
    moment.is_like = !moment.is_like;
    if (moment.is_like) {
      moment.like_user_list.push({
        wx_id: msgprofile.wx_id,
        nick_name: msgprofile.nick_name,
        time: Math.floor(Date.now() / 1000)
      });
      moment.like_count++;
      moment.like_user_count++;
    } else {
      const index = moment.like_user_list.findIndex((user) => user.wx_id === msgprofile.wx_id);
      if (index > -1) {
        moment.like_user_list.splice(index, 1);
        moment.like_count--;
        moment.like_user_count--;
      }
    }
  } catch (error) {
    ElMessage.error('操作失败');
  }
};

// 评论处理
const handleComment = (moment: Moment) => {
  // 如果已经显示输入框，则隐藏
  if (moment.showCommentInput) {
    moment.showCommentInput = false;
    moment.commentContent = '';
    return;
  }

  // 否则显示输入框
  moment.showCommentInput = true;
  moment.commentContent = '';
};

// 提交评论
const submitComment = async (moment: Moment) => {
  if (!moment.commentContent?.trim()) {
    ElMessage.warning('请输入评论内容');
    return;
  }

  try {
    await addMomentsComment(moment.id, moment.commentContent, msgprofile.wx_id);
    moment.comment_user_list.push({
      comment_id: Date.now(),
      wx_id: msgprofile.wx_id,
      nick_name: msgprofile.nick_name,
      content: moment.commentContent,
      time: Math.floor(Date.now() / 1000)
    });
    moment.comment_count++;
    moment.comment_user_count++;
    moment.showCommentInput = false;
    moment.commentContent = '';
    ElMessage.success('评论成功');
  } catch (error) {
    ElMessage.error('评论失败');
  }
};

// 取消评论
const cancelComment = (moment: Moment) => {
  moment.showCommentInput = false;
  moment.commentContent = '';
};

// 获取图片网格类名
const getImageGridClass = (count: number) => {
  return `grid-${count}`;
};

// 在script部分添加formatTime函数
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp * 1000);
  return date.toLocaleString();
};

// 删除评论
const handleDeleteComment = async (moment: Moment, comment: any) => {
  try {
    await deleteMomentsComment(moment.id, comment.comment_id, msgprofile.wx_id);
    const index = moment.comment_user_list.findIndex((item) => item.comment_id === comment.comment_id);
    if (index > -1) {
      moment.comment_user_list.splice(index, 1);
      moment.comment_count--;
      moment.comment_user_count--;
    }
    ElMessage.success('删除评论成功');
  } catch (error) {
    ElMessage.error('删除评论失败');
  }
};

const openLink = (url: string) => {
  window.open(url, '_blank');
};

onMounted(() => {
  // 如果本地存储中有微信号，则自动加载数据
  if (msgprofile.wx_id) {
    handleSearch();
  }

  // 添加滚动监听
  const container = scrollContainer.value;
  if (container) {
    container.addEventListener('scroll', handleScroll);
  }
});

onUnmounted(() => {
  // 移除滚动监听
  const container = scrollContainer.value;
  if (container) {
    container.removeEventListener('scroll', handleScroll);
  }
});
</script>

<style lang="scss" scoped>
.send-social {
  max-width: 1200px;
  padding: 20px;
  height: 100vh;
  position: relative;
  overflow-y: auto;
  margin: auto;
  .friend-header {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .friend-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .friend-detail {
        h3 {
          margin: 0 0 8px 0;
          font-size: 18px;
          color: #333;
        }

        .friend-wxid {
          margin: 0;
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }

  .moments-section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    min-height: calc(100vh - 40px);

    .moments-list {
      .moment-item {
        padding: 20px;
        border-bottom: 1px solid #ebeef5;

        &:last-child {
          border-bottom: none;
        }

        .moment-header {
          display: flex;
          align-items: center;
          margin-bottom: 16px;

          .avatar,
          .name {
            cursor: pointer;
            transition: opacity 0.3s;

            &:hover {
              opacity: 0.8;
            }
          }

          .avatar {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 12px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .info {
            .name {
              font-size: 16px;
              font-weight: 500;
              color: #333;
              margin-bottom: 4px;
            }

            .time {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .moment-content {
          margin-bottom: 16px;

          .text {
            font-size: 15px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 12px;
            white-space: pre-wrap;
          }

          .media {
            margin-bottom: 12px;

            .image-grid {
              display: grid;
              gap: 4px;
              width: 100%;
              max-width: 500px;

              &.grid-1 {
                grid-template-columns: 1fr;
                .image-item {
                  width: 100%;
                  max-width: 250px;
                  height: auto;
                  aspect-ratio: auto;

                  :deep(.el-image) {
                    position: relative;
                    height: auto;

                    img {
                      width: 100%;
                      height: auto;
                      object-fit: contain;
                    }
                  }
                }
              }

              &.grid-2 {
                grid-template-columns: repeat(2, 1fr);
                .image-item {
                  aspect-ratio: 1;
                  width: 100%;
                }
              }

              &.grid-3 {
                grid-template-columns: repeat(3, 1fr);
                .image-item {
                  aspect-ratio: 1;
                  width: 100%;
                }
              }

              &.grid-4 {
                grid-template-columns: repeat(2, 1fr);
                .image-item {
                  aspect-ratio: 1;
                  width: 100%;
                }
              }

              &.grid-5,
              &.grid-6 {
                grid-template-columns: repeat(3, 1fr);
                .image-item {
                  aspect-ratio: 1;
                  width: 100%;
                }
              }

              &.grid-7,
              &.grid-8,
              &.grid-9 {
                grid-template-columns: repeat(3, 1fr);
                .image-item {
                  aspect-ratio: 1;
                  width: 100%;
                }
              }

              .image-item {
                border-radius: 4px;
                overflow: hidden;
                position: relative;
                // background-color: #f5f5f5;

                :deep(.el-image) {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;

                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                  }
                }
              }
            }

            .video-content {
              margin: 10px 0;

              .video-player {
                width: 100%;
                max-width: 250px;
                border-radius: 8px;
                background: #000;
              }
            }
          }

          .location {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #909399;

            .el-icon {
              margin-right: 4px;
            }
          }
        }

        .moment-footer {
          .actions {
            display: flex;
            gap: 24px;
            margin-bottom: 16px;

            .el-button {
              padding: 0;
              height: auto;
              font-size: 14px;
              color: #909399;
              transition: all 0.2s;
              position: relative;

              .el-icon {
                margin-right: 4px;
                font-size: 16px;
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                display: inline-flex;
                align-items: center;
                justify-content: center;
              }

              &:hover {
                color: #409eff;
                .el-icon {
                  transform: scale(1.2);
                }
              }

              &.is-liked {
                color: #409eff;
                .el-icon {
                  animation: likeAnimation 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
                  color: #409eff;
                }
              }
            }
          }

          .interactions {
            background: #fafafa;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;

            .likes {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              font-size: 14px;
              color: #606266;

              .el-icon {
                margin-right: 6px;
                color: #409eff;
                font-size: 16px;
              }

              span {
                color: #409eff;
                font-weight: 500;
              }
            }

            .comments {
              .comment-item {
                font-size: 14px;
                line-height: 1.5;
                margin-bottom: 4px;
                display: flex;
                align-items: flex-start;
                padding: 2px 4px;
                border-radius: 4px;
                transition: all 0.2s;
                min-height: 24px;
                position: relative;

                &:last-child {
                  margin-bottom: 0;
                }

                &:hover {
                  background: #f5f7fa;
                }

                .comment-user {
                  color: #409eff;
                  font-weight: 500;
                  margin-right: 6px;
                  cursor: pointer;
                  transition: all 0.2s;
                  flex-shrink: 0;

                  &:hover {
                    color: #66b1ff;
                  }
                }

                .comment-content {
                  color: #606266;
                  flex: 1;
                  word-break: break-all;
                  padding-right: 24px;
                }

                .delete-comment {
                  padding: 0 4px;
                  color: #f56c6c;
                  opacity: 0;
                  transition: all 0.2s;
                  position: absolute;
                  right: 8px;
                  top: 2px;
                  height: 20px;
                  display: flex;
                  align-items: center;

                  &:hover {
                    color: #f78989;
                  }
                }

                &:hover {
                  .delete-comment {
                    opacity: 1;
                  }
                }
              }
            }
          }

          .comment-input {
            margin-top: 12px;

            .el-textarea {
              .el-textarea__inner {
                background-color: #fff;
                border: 1px solid #e4e7ed;
                border-radius: 4px;
                transition: all 0.2s;
                padding: 8px 12px;
                font-size: 14px;
                line-height: 1.5;
                resize: none;

                &:focus {
                  border-color: #409eff;
                  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
                }

                &::placeholder {
                  color: #909399;
                }
              }
            }

            .comment-actions {
              display: flex;
              justify-content: flex-end;
              gap: 8px;
              margin-top: 8px;

              .el-button {
                padding: 6px 16px;
                font-weight: 500;
                border-radius: 4px;
                transition: all 0.2s;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
                }
              }
            }
          }
        }
      }

      .load-more {
        text-align: center;
        padding: 20px 0;

        .el-button {
          font-size: 14px;
        }
      }
    }

    .empty-state {
      height: 100%;
      padding: 20px;

      .skeleton-container {
        width: 100%;
        margin: 0 auto;

        .skeleton-moment {
          background: #fff;
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 20px;

          .skeleton-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;

            .skeleton-avatar {
              width: 40px;
              height: 40px;
              border-radius: 4px;
              background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
              background-size: 200% 100%;
              animation: skeleton-loading 1.5s infinite;
            }

            .skeleton-info {
              margin-left: 12px;
              flex: 1;

              .skeleton-name {
                width: 120px;
                height: 16px;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
                margin-bottom: 8px;
                border-radius: 4px;
              }

              .skeleton-time {
                width: 80px;
                height: 12px;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
                border-radius: 4px;
              }
            }
          }

          .skeleton-content {
            margin-bottom: 16px;

            .skeleton-text {
              height: 16px;
              background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
              background-size: 200% 100%;
              animation: skeleton-loading 1.5s infinite;
              border-radius: 4px;
              margin-bottom: 12px;

              &:nth-child(1) {
                width: 100%;
              }
              &:nth-child(2) {
                width: 90%;
              }
            }

            .skeleton-media-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 4px;
              margin-top: 12px;
              max-width: 250px;

              .skeleton-media-item {
                aspect-ratio: 1;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
                border-radius: 4px;
              }
            }

            .skeleton-media-single {
              height: 200px;
              max-width: 250px;
              background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
              background-size: 200% 100%;
              animation: skeleton-loading 1.5s infinite;
              border-radius: 8px;
              margin-top: 12px;
            }
          }

          .skeleton-footer {
            .skeleton-actions {
              display: flex;
              gap: 24px;
              margin-bottom: 16px;

              .skeleton-button {
                width: 60px;
                height: 24px;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
                border-radius: 4px;
              }
            }

            .skeleton-interactions {
              background: #fafafa;
              border-radius: 8px;
              padding: 12px 16px;

              .skeleton-likes {
                height: 20px;
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
                border-radius: 4px;
                margin-bottom: 12px;
                width: 60%;
              }

              .skeleton-comments {
                .skeleton-comment {
                  height: 20px;
                  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                  background-size: 200% 100%;
                  animation: skeleton-loading 1.5s infinite;
                  border-radius: 4px;
                  margin-bottom: 8px;

                  &:nth-child(1) {
                    width: 80%;
                  }
                  &:nth-child(2) {
                    width: 70%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .floating-buttons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    gap: 10px;
    z-index: 100;

    .back-home,
    .back-to-top {
      width: 40px;
      height: 40px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
      }

      .el-icon {
        font-size: 20px;
      }
    }

    .back-home {
      background-color: #67c23a;
      border-color: #67c23a;

      &:hover {
        background-color: #85ce61;
        border-color: #85ce61;
      }
    }

    .back-to-top {
      background-color: #409eff;
      border-color: #409eff;

      &:hover {
        background-color: #66b1ff;
        border-color: #66b1ff;
      }
    }
  }
}

@keyframes likeAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.link-list {
  .link-box {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 12px;
    padding: 8px;
    transition: background 0.2s;
    background: #f5f7fa;
    border-radius: 6px;
    &:hover {
      background: #f5f7fa;
    }
    &:hover .link-title {
      color: #409eff;
    }
    .link-img {
      width: 40px;
      height: 40px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .link-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .link-title {
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 15px;
      color: #333;
    }
    .link-desc {
      font-size: 13px;
      color: #888;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }
  }
}
</style>